<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>上传文件</title>
    <link rel="stylesheet" th:href="@{/css/upload.css}"/>
</head>
<body>
<div class="box">
    <form class="form-horizontal" id="form_table" enctype="multipart/form-data" method="post">
        <input type="file" name="filename" id="file-1" class="inputfile inputfile-1" data-multiple-caption="{count} files selected" multiple />
        <label for="file-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg>
            <span>导入教师</span>
        </label>
        <div class="upload">
            <button type="button" class="submit_btn" id="submit_btn">上传</button>
            <span class="info" id="info"></span>
            <span class="loading" id="loading">
                    <div class="obj"></div>
                    <div class="obj"></div>
                    <div class="obj"></div>
                </span>
        </div>

    </form>
</div>
</body>
<script th:src="@{/js/jquery/jquery-3.4.1.js}"></script>
<script type="text/javascript">
    'use strict';

    ;( function( $, window, document, undefined )
    {
        $( '.inputfile' ).each( function()
        {
            var $input	 = $( this ),
                $label	 = $input.next( 'label' ),
                labelVal = $label.html();

            $input.on( 'change', function( e )
            {
                var fileName = '';

                if( this.files && this.files.length > 1 )
                    fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
                else if( e.target.value )
                    fileName = e.target.value.split( '\\' ).pop();

                if( fileName )
                    $label.find( 'span' ).html( fileName );
                else
                    $label.html( labelVal );
            });

            // Firefox bug fix
            $input
                .on( 'focus', function(){ $input.addClass( 'has-focus' ); })
                .on( 'blur', function(){ $input.removeClass( 'has-focus' ); });
        });
    })( jQuery, window, document );

    $("#submit_btn").on("click",function () {
        $("#info").css("display","none");
        $("#loading").css("display","flex");
        if($("#file-1").val() == ""){
            $("#info")[0].innerText = "文件为空，无法上传!";
            $("#loading").css("display","none");
            $("#info").css("display","inline-block");
        }else{
            $.ajax({
                url: '/admin/importTeachers',
                type: 'POST',
                cache: false,
                data: new FormData($('#form_table')[0]),
                processData: false,
                contentType: false
            }).done(function(res) {
                $("#info")[0].innerText = res;
                $("#loading").css("display","none");
                $("#info").css("display","inline-block");
            }).fail(function(res) {
                $("#info")[0].innerText = "只能上传excel文件!";
                $("#loading").css("display","none");
                $("#info").css("display","inline-block");
            });
        }
    })
</script>
</html>